@import "~@/styles/variables.scss";
@import "~@/styles/mixins.scss";

.base-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $padding-medium $padding-large;
  border-radius: $button-radius;
  font-size: $font-subtitle;
  font-weight: $font-weight-normal;
  text-align: center;
  transition: $transition-normal;
  border: none;
  outline: none;
  overflow: hidden;
  
  // 主要按钮样式
  &--primary {
    background-color: $primary-color;
    color: $white;
    
    &:active {
      background-color: darken($primary-color, 10%);
    }
  }
  
  // 次要按钮样式
  &--secondary {
    background-color: $white;
    color: $primary-color;
    border: 1px solid $primary-color;
    
    &:active {
      background-color: rgba($primary-color, 0.05);
    }
  }
  
  // 文本按钮样式
  &--text {
    background-color: transparent;
    color: $primary-color;
    padding: $padding-small;
    
    &:active {
      background-color: rgba($primary-color, 0.05);
    }
  }
  
  // 块级按钮
  &--block {
    display: flex;
    width: 100%;
  }
  
  // 圆形按钮
  &--round {
    border-radius: 100rpx;
  }
  
  // 禁用状态
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    
    &:active {
      opacity: 0.5;
    }
  }
  
  // 加载状态
  &--loading {
    opacity: 0.8;
    cursor: default;
  }
  
  // 按钮尺寸
  &--small {
    padding: $padding-small $padding-medium;
    font-size: $font-small;
    min-height: 60rpx;
  }
  
  &--normal {
    min-height: 80rpx;
  }
  
  &--large {
    padding: $padding-medium $padding-large * 1.5;
    font-size: $font-title;
    min-height: 100rpx;
  }
  
  // 迷你按钮
  &--mini {
    padding: $padding-small / 2 $padding-small;
    font-size: $font-mini;
    min-height: 40rpx;
    border-radius: $radius-small;
  }
  
  // 加载动画
  &__loading {
    width: 30rpx;
    height: 30rpx;
    border: 3rpx solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    margin-right: 10rpx;
    animation: button-loading 0.8s infinite linear;
  }
  
  // 图标
  &__icon {
    width: $icon-small;
    height: $icon-small;
    margin-right: 10rpx;
  }
}

@keyframes button-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 